<template>
  <view class="order">
    <view class="title">
      <view class="name">我的订单</view>
      <view class="more" @click="goOrderAll">
        查看全部订单
        <u-icon name="arrow-right" color="#8e8f91" size="24rpx"></u-icon>
      </view>
    </view>
    <view class="list">
      <view class="item" v-for="(item, index) in list" :key="index" @click="goOrderItem(item)">
        <view class="image">
          <v-image :url="'/mini/order/' + item.image + '.png'" :width="'60rpx'" :height="'60rpx'" />
        </view>
        <view class="text">{{ item.text }}</view>
        <!--<span class="count_x" v-if="user.order_count && user.order_count[item.image] > 0">{{ user.order_count[item.image] }}</span>-->
      </view>
    </view>
  </view>
</template>

<script>
import Image from '../../../../components/image/index'

export default {
  components: {
    'v-image': Image,
  },
  data() {
    return {
      list: [
        { image: 'non_payment', text: '待付款', index: '1' },
        { image: 'paid', text: '待发货', index: '2' },
        { image: 'wait_receiving', text: '待收货', index: '3' },
        { image: 'received', text: '待评价', index: '4' },
        { image: 'service', text: '售后', index: '5' },
      ]
    }
  },
  methods: {
    // 全部订单
    goOrderAll() {
      uni.navigateTo({
        url: '/sub_service/order/index'
      })
    },
    // 跳转订单
    goOrderItem(item) {
      uni.navigateTo({
        url: `/sub_service/order/index?type=${item.index}`
      })
    },
  }
}
</script>

<style scoped lang="scss">
.order {
  //font-size: 24rpx;
  margin: 20rpx;
  background: white;
  border-radius: 10rpx;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    border-bottom: 1rpx solid #efefef;
    padding: 0 20rpx;
    .name {
      font-weight: 700;
      font-size: 28rpx;
    }
    .more {
      color: #8e8f91;
      font-size: 24rpx;
      display: flex;
    }
  }
  .list {
    display: flex;
    justify-content: space-around;
    padding: 30rpx 0;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      //background: red;
      position: relative;
      .text {
        font-size: 24rpx;
      }
      .count_x {
        background: $main_color;
        position: absolute;
        top: 0;
        right: 0;
        width: 50rpx;
        height: 50rpx;
        overflow: hidden;
        line-height: 50rpx;
        border-radius: 50%;
        opacity: 0.85;
        text-align: center;
        color: white;
      }
    }
    .image {
      height: 60rpx;
      width: 60rpx;
      padding: 10rpx;
      //background: red;
      //image {
      //  width: 100%;
      //  height: 100%;
      //}
    }

  }
}
</style>
